@import 'common';
body{
    height: 100%;
}
// 搜索框
.searchBox{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding-left: 12px;
    box-sizing: border-box;
    z-index: 9;
    .search{
      position: relative;
      flex: 1;
      height: 28px;
      line-height: 28px;
      border-radius: 14px;
      background-color: #fff;
      color: #666;
      font-size: 15px;
      padding-left: 35px;
      &::before{
          position: absolute;
          top: 0;
          left: 0;
          content:"";
          width: 35px;
          height: 100%;;
          overflow: hidden;
          background: url(../images/home-common-sprite2x@v7.15.png) no-repeat 10px 6.5px;
          background-size: 21px 123px;
          vertical-align: middle;
      }
    }
    .login{
        width: 51px;
        height: 44px;
        padding-right: 4px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .people{
            width: 21px;
            height: 21px;
            background: url(../images/home-common-sprite2x@v7.15.png) no-repeat 0 -36px;
            background-size: 21px 123px;
        }
        .mine{
            font-size: 12px;
        }
    }
}
// 顶部背景图
.focus{
    position: relative;
    width: 100%;
    height: 224px;
    padding: 0 25%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: translateX(-16.6666%);
    overflow: hidden;
    z-index: -1;
    a img{
        width: 100%;
        height: 224px;
    }
    &::after{
        display: block;
        content:'';
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 60px;
        background-image:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0)) ;
    }
}
// 本地导航
.local-nav{
    height: 52px;
    margin:-52px 12px 10px;
    padding-top: 4px;
    padding-bottom: 8px;
    background-color: #fff;
    border-radius:8px ;
    .navList{
        width: 100%;
        height: 52px;
        display: flex;
        justify-content: flex-start;
        .navItem{
            display: block;
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .navIcon{
                width:40px;
                height: 40px;
                background: url(../images/home-fivemain-sprite2x@v7.15.png) no-repeat 0 0; 
                background-size: 40px auto;
            }
            span{
               font-size: 12px; 
               font-weight: 500;
            }
        }
        .navItem:nth-child(2){
            .navIcon{
                background: url(../images/home-fivemain-sprite2x@v7.15.png) no-repeat 0 -40px; 
                background-size: 40px auto;
            }
        } 
        .navItem:nth-child(3){
            .navIcon{
                background: url(../images/home-fivemain-sprite2x@v7.15.png) no-repeat 0 -80px; 
                background-size: 40px auto;
            }
        } 
        .navItem:nth-child(4){
            .navIcon{
                background: url(../images/home-fivemain-sprite2x@v7.15.png) no-repeat 0 -120px; 
                background-size: 40px auto;
            }
        } 
        .navItem:nth-child(5){
            .navIcon{
                background: url(../images/home-fivemain-sprite2x@v7.15.png) no-repeat 0 -160px; 
                background-size: 40px auto;
            }
        } 
    }
}
// 网格导航
.grid-nav{
    margin:0 12px 1px;
    height: 196px;
    .gridList{
        width: 100%;
        height: 196px;
        border-radius: 8px;
        overflow: hidden;
        .common{
          display: flex;
          justify-content: flex-start;
          height:64.8px;
          margin-bottom: 1px;
          background-image:linear-gradient(to right, #4C91ED, #53BCEE) ;
          a{
            display: block;
            color: #fff;
            font-size: 14px;
            box-sizing: border-box;
            border-right: 1px solid #fff;
            span{
                display: block;
                padding-left: 12px;
                line-height: 64.8px;
                box-sizing: border-box;
            }  
          }
          a:nth-child(1){
            flex: 1.35;
          }
          a:nth-child(n+2){
            flex: 1;
          }
          a:last-child{
            border-right:none;
          }
        }
        .common:nth-child(1){
            background-image: linear-gradient(to right,#FA5A56,#FA7252 56%);
            a:nth-child(1){
                background: url(../images/hotel.png)  no-repeat right bottom;
                background-size: 73px auto;
            }
            a:nth-child(2){
                background:url(../images/minsu.png);
                background-size: auto 20px;
                background-repeat: no-repeat;
                background-position: left bottom;
            }
            a:nth-child(3){
                flex: 2;
                background: url(../images/hot_sale.png),linear-gradient(to right, #FFBC49, #FFD152) ;
                background-size: auto 97.5px;
                background-repeat: no-repeat;
                background-position: right bottom;
                color: #A05416;
                text-align: center;
            }
        }
        .common:nth-child(2){
            a:nth-child(1){
                background: url(../images/flight.png) no-repeat right bottom;
                background-size:auto 34px;
            }
            a:nth-child(2){
                background: url(../images/train.png) no-repeat left bottom;
                background-size:37px auto;
            }
        }
        .common:nth-child(3){
          background-image:linear-gradient(to right, #34C2AA, #6BD558) ;
          a:nth-child(1){
            background: url(../images/travel.png) no-repeat right bottom;
            background-size:auto 47px;
         }
           a:nth-child(2){
            background: url(../images/dingzhi.png) no-repeat left bottom;
            background-size:61px auto;
          }
        }
    }
}
// sub-nav
.sub-nav{
    margin: 0 12px;
    .subList{
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{
            width: 20%;
            height: 55px;
            a{ 
                display: block;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
                height: 55px;
                span:nth-child(1){
                    display: block;
                    width: 28px;
                    height: 28px;
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 0;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(2){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -28px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(3){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -56px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(4){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -84px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(5){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -112px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(6){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -140px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(7){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -168px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(8){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -196px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(9){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -224px;
                    background-size: 28px auto;
                }
            }
        }
        li:nth-child(10){
            a{
                span:nth-child(1){
                    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat 0 -252px;
                    background-size: 28px auto;
                }
            }
        }
    }
}
//footer
footer{
   height: 117px;
   width: 100%;
   padding: 1px 0 5px;
   .f-top{
       height: 58px;
       padding-bottom: 1px;
       margin-bottom: 5px;
       display: flex;
       justify-content: flex-start;
       background-color: #fff;
       border-top:1px solid #DBDBDB;
       border-bottom:1px solid #DBDBDB;
       a{
        display: block;
        flex: 1;
        height: 40px;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #333;
        span:nth-child(1){
           width: 20px;
           height: 20px;
           margin-bottom: 2px;
           background: url(../images/tel.png) no-repeat center center;
        }
      }
       a:nth-child(2){
        span:nth-child(1){
         background: url(../images/download.png) no-repeat center center;
        }
       }
       a:nth-child(3){
         span:nth-child(1){
         background: url(../images/user.png) no-repeat center center;
        }
       }
    }
    .f-middle{
        width: 100%;
        height: 24px;
        color: #666;
        text-align: center;
        line-height: 24px;
    }
    .f-bottom{
        color: #999;
        padding: 5px 0;
        font-size: 12px;
        text-align: center;
    }
}